<template>
	<view class="animated fadeIn faster d-flex-column">
		<view class="px-2 pt-2">
			<view class="src-bg rounded40 px-3 d-flex d-flex-middle" @click="funcTit">
				<text class="iconfont icon-icon_sousuo mr-1 color999"></text>
				<text class="colorhold">搜索想要练习的考试</text>
			</view>
		</view>
		
		<view class="cateBox">
			<view class="cate-left">
				<view class="cate-left-item" v-for="(item,index) in cateType" :key="item.id" @click="changeCate(index)">
					<view class="cate-left-curr" v-if="curr == index"></view>
					<text class="font26" :class="{'colorlan':curr == index}">{{item.title}}</text>
				</view>
				
			</view>
			
			<view class="cate-right">
				<view class="cate-right-item d-flex d-flex-middle d-flex-between" v-for="cnt in content" :key="cnt.id" @click="goExam">
					<text>{{cnt.name}}</text>
					<text class="iconfont icon-youjiantou color999"></text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const content1 = [{
					id:'1',
					name:'一级建造师'
				},{
					id:'2',
					name:'二级建造师'
				},{
					id:'3',
					name:'中级注册安全工程师'
				},{
					id:'4',
					name:'监理工程师'
				},{
					id:'5',
					name:'一级造价工程师'
				},{
					id:'6',
					name:'二级造价工程师'
				},{
					id:'7',
					name:'设备监理师'
				}]
	const content2 = [{
					id:'1',
					name:'中级经济师'
				},{
					id:'2',
					name:'高级经济师'
				},{
					id:'3',
					name:'初级会计专业技术资格'
				},{
					id:'4',
					name:'中级会计专业技术资格'
				},{
					id:'5',
					name:'高级会计专业技术资格'
				},{
					id:'6',
					name:'证券专业水平评价'
				}]
	export default {
		data() {
			return {
				cateType:[
					{
						id:'1',
						title:'建筑工程'
					},{
						id:'2',
						title:'财会金融'
					},{
						id:'3',
						title:'考公考编'
					},{
						id:'4',
						title:'职业资格'
					},{
						id:'5',
						title:'特种作业'
					},{
						id:'6',
						title:'技能鉴定'
					},{
						id:'7',
						title:'消防救援'
					},{
						id:'8',
						title:'医药卫生'
					},{
						id:'9',
						title:'交通运输'
					}
				],
				showContent:false,
				content:[],
				curr:0
			}
		},
		onReady() {
			this.content = content1
		},
		methods: {
			funcTit(){
				uni.showToast({
					title:'功能开发中...',
					icon:'none'
				})
			},
			changeCate(index){
				let that = this
				that.curr = index
				that.showContent = !that.showContent
				uni.showLoading({
					title:'操作中...'
				})
				setTimeout(()=>{
					uni.hideLoading()
					if(that.showContent){
						that.content = content2
					}else{
						that.content = content1
					}
				},500)
			},
			goExam(){
				uni.navigateTo({
					url:'/subPages/chapter/chapter'
				})
			}
		}
	}
</script>

<style scoped>
.src-bg{
	background-color: #f5f5f7;
	height: 76rpx;
}
.cateBox {
	position: absolute;
	top: 116rpx;
	bottom: 20rpx;
	width: 750rpx;
	left: 0;
	right: 0;
	display: flex;
}
.cate-left {
	width: 170rpx;
	background: #f5f5f7;
	height: 100%;
}
.cate-left-item {
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	color:#666;
	position: relative;
}
.cate-left-curr{
	position:absolute;
	width: 4rpx;
	height: 35rpx;
	background-color: #3a84fc;
	left: 0;
	top: 27rpx;
}
.cate-right {
	flex: 1;
	padding-left: 25rpx;
	padding-right: 25rpx;
}
.cate-right-item{
	height: 90rpx;
	background-color: #f5f5f7;
	color:#303133;
	padding-left: 25rpx;
	padding-right: 25rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}
</style>
